<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该实例演示如何使用G6自定义类似饼图的节点
       * by 十吾
       *
       */
      const lightBlue = 'rgb(119, 243, 252)';
      const lightOrange = 'rgb(230, 100, 64)';

      // 注册自定义名为 pie-node 的节点类型
      G6.registerNode(
        'pie-node',
        {
          drawShape: (cfg, group) => {
            const radius = cfg.size / 2; // 节点半径
            const inPercentage = cfg.inDegree / cfg.degree; // 入度占总度数的比例
            const inAngle = inPercentage * Math.PI * 2; // 入度在饼图中的夹角大小
            const outAngle = Math.PI * 2 - inAngle; // 出度在饼图中的夹角大小
            const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; //入度饼图弧结束位置
            let isInBigArc = 1,
              isOutBigArc = 0;
            if (inAngle > Math.PI) {
              isInBigArc = 0;
              isOutBigArc = 1;
            }
            // 定义代表入度的扇形形状
            const fanIn = group.addShape('path', {
              attrs: {
                path: [
                  ['M', radius, 0],
                  ['A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1]],
                  ['L', 0, 0],
                  ['B'],
                ],
                lineWidth: 0,
                fill: lightOrange,
              },
            });
            // 定义代表出度的扇形形状
            const fanOut = group.addShape('path', {
              attrs: {
                path: [
                  ['M', inArcEnd[0], inArcEnd[1]],
                  ['A', radius, radius, 0, isOutBigArc, 0, radius, 0],
                  ['L', 0, 0],
                  ['B'],
                ],
                lineWidth: 0,
                fill: lightBlue,
              },
            });
            // 返回 keyshape
            return fanIn;
          },
        },
        'single-shape',
      );

      const data = {
        nodes: [
          {
            size: 80,
            inDegree: 80,
            degree: 360,
            x: 50,
            y: 200,
          },
          {
            size: 80,
            inDegree: 280,
            degree: 360,
            x: 200,
            y: 200,
          },
        ],
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          shape: 'pie-node',
        },
      });

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
